<!--

    JBoss, Home of Professional Open Source
    Copyright 2013, Red Hat, Inc. and individual contributors
    by the @authors tag. See the copyright.txt in the distribution for a
    full listing of individual contributors.

    This is free software; you can redistribute it and/or modify it
    under the terms of the GNU Lesser General Public License as
    published by the Free Software Foundation; either version 2.1 of
    the License, or (at your option) any later version.

    This software is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
    Lesser General Public License for more details.

    You should have received a copy of the GNU Lesser General Public
    License along with this software; if not, write to the Free
    Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
    02110-1301 USA, or see the FSF site: http://www.fsf.org.

-->
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            var previousId = "header";
            function updateHeader() {
                var text = document.getElementById("textInput").value;
                var id = document.getElementById("idInput").value;
                var header = document.getElementById(previousId);
                header.innerHTML = text;
                header.setAttribute("id", id);
                previousId = id;
            }
            function hideHeader() {
                var header = document.getElementById(previousId);
                header.setAttribute("style", "display: none");
                var hide = document.getElementById("hide");
                hide.setAttribute("disabled", "disabled");
                var appear = document.getElementById("appear");
                appear.removeAttribute("disabled");
            }
            function appearHeader() {
                var header = document.getElementById(previousId);
                header.removeAttribute("style");
                var appear = document.getElementById("appear");
                appear.setAttribute("disabled", "disabled");
                var hide = document.getElementById("hide");
                hide.removeAttribute("disabled");
            }
        </script>
    </head>
    <body>
        <h1 id="header">Tested Header</h1>

        <input type="text" value="Tested Header" id="textInput" />
        <input type="text" id="idInput" value="header" />
        <button id="submit" onclick="updateHeader()">Update</button>
        <button id="hide" onclick="hideHeader()">Hide</button>
        <button id="appear" onclick="appearHeader()">Appear</button>

        <select id="select">
            <option id="option1" value="1">option 1</option>
            <option id="option2" value="2">option 2</option>
        </select>
    </body>
</html>